<template>
<div class="body1"> 
  <el-header>
   <start-header/>
  </el-header>
  <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
    background-color="#fff"
  text-color="black"
  active-text-color="rgb(46, 136, 204)">
  <el-menu-item index="1">首页</el-menu-item>
  <el-menu-item index="2" >题库</el-menu-item>
  <el-submenu index="3" >
    <template slot="title">我的</template>
     <el-menu-item index="3-1" @click="myspace">我的空间</el-menu-item>
    <el-menu-item index="3-2" @click="myinformation">个人信息</el-menu-item>
    <el-menu-item index="3-2" @click="manage">管理</el-menu-item>
    <el-menu-item index="3-3">退出</el-menu-item>
  </el-submenu>
</el-menu> -->
<div class="body2">
    <div class="content"></div>
  <div class="contents">
    <h1>Atcoder在线题库</h1>
    <!-- <div class="search"><input v-model="input" placeholder="请输入题目查询"/></div> -->
    <div class="search">
             <input type="text" v-model="input" placeholder="请输入题目查询"/>
             <button class="button">搜索</button>
        </div>
    <div class="question">
      <template>
  <!-- element组件 -->
  <el-table
    :data="tableData"
    height="250"
    :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}"
    style="width: 100%;">
    <el-table-column
      prop="id"
      label="ID"
      width="80">
    </el-table-column>
    <el-table-column
      prop="title"
      label="题目"
      width="180">
    </el-table-column>
    <el-table-column
      prop="ac"
      label="通过率">
    </el-table-column>
     <el-table-column
      prop="difficulty"
      label="难度">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">答题</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
    </div>
  </div>
    <div class="content"></div>
</div>
<div class="bottom">
    <start-footer />
</div>
<!-- <Content :aaaa="aaaa" :row="scope.row"></Content> -->
</div>
</template>
<style scoped>
.el-header{ 
        background-color: #DCE4F1;
        /* background-color: black; */
        color: #333; 
        text-align: center; 
        line-height: 80px;
    }
h1{
  flex: 0 0 100px;
  text-align: center;
  line-height: 100px;
  color: aliceblue;
}
.search{
  flex:2;
  display:flex;
}
.question{
  flex:9;
}
.body1{
  display:flex;
  flex-direction:column;
}
.el-menu-demo{
  flex: 0 0 30px;
}
.content{
  flex:2;
  display: flex;
}
.contents{
  flex:6;
  background-color:rgba(22, 22, 23, 0.2);
  /* background-color: transparent; */
  margin-top:20px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 0 25px 10px rgba(200, 205, 233, 0.3);
  display: flex;
  flex-direction: column;
}
.body2{
   display: flex;
   justify-content: center;
   flex:520px;
   background-color: rgb(113, 121, 153,0.3);
   background-image: url("../../assets/background.jpg");
}
.bottom{
  flex:40px;
}
  button{
        flex:2;
        border: none;
        background-color: transparent;
        outline: none;  
        background-color: rgb(46, 136, 204); 
        width: 100px;
        height: 45px;
        border-radius: 0 20px 20px 0;
        font-size: 20px;
        color:white;
        font-weight: 700;
        margin-right:20px;
        /* position:absolute;
        right:210px; */
     }
       input{
        flex:11;
        height: 40px;
        width: 90%;
        border-color:rgb(46, 136, 204);
        border-radius:20px 0 0 20px;
        margin-left:25px;
     }
</style>
<script>
import StartHeader from '../StartCommon/StartHeader.vue'
import StartFooter from '../StartCommon/StartFooter.vue';
const axios = require('axios');
export default {
    components: { StartHeader,StartFooter},
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        input: '',
        rowss:{},
        aaaa: 'hell0',
        tableData: [
          {
            id: '',
            question_type: '',
           difficulty:'',
            title: '',
            description: '',
            input_description: '',
            output_description: '',
            question_range: '',
            input_sample: '',
            output_sample:'',
            ac: '',
            wa: '',
            time_limit: '',
            memory_limit: '',
            // is_exist:''
        //  access:'',
         
        }],
      };
  },
  mounted() {
    axios({
         method: 'post',
        url: '/getQuestion',
    }).then(res => {
      this.tableData = res.data;
      console.log(res.data)
      })
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      myspace() {
         this.$router.replace('/Myspace')
      },
      myinformation() {
        this.$router.replace('/Myinformation')
      },
      manage() {
        this.$router.replace('/Manage')
      },
      //点击之后触发
      handleClick(row) {
        console.log(row);
        this.rowss = row
        console.log(this.rowss)
        //利用$router.push进行跳转        
      this.$router.push({
    //path后面跟跳转的路由地址
          path: '/Content',
    //name后面跟跳转的路由名字（必须有亲测，不使用命名路由会传参失败）
          name: 'Content',
          params: {
              //imgsListsUrl2是自己定义的名字，this.imgsListsUrl是要被传递的值
            imgsListsUrl2: this.tableData,
            rows: this.rowss
          }
        })
      }
    }
  }
</script>